<template>
	<view class="uni-container">
		<!-- 选择地址栏 -->
		<view>
			<view class="outer-box choose-address" @click="addAddress">
				<image src="@/static/address/address-choose.png" style="width: 80rpx;height: 80rpx;"></image>
				<text style="font-weight: bold;">选 择 地 址</text>
				<view style="width: 50rpx;"></view>
			</view>

			<view class="outer-box" style="height: 150rpx;">
				<uni-row>
					<uni-col :span="4">
						<view class="confirm-address-image">
							<image src="@/static/address/information.png" style="width: 80rpx;height: 80rpx;">
							</image>
						</view>
					</uni-col>
					<uni-col :span="20">
						<view style="height: 150rpx;">
							<view style="height: 10%;" />

							<view style="height: 30%;font-weight: bold;">
								<text>{{userInfo[0]==null?'':userInfo[0].name}}</text></br>
							</view>

							<view class="address-font-box">
								<text class="address-font">{{userInfo[0]==null?'':userInfo[0].address}}</text>
							</view>
							<view style="height: 10%;" />
						</view>
					</uni-col>
				</uni-row>
			</view>
		</view>

		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="date_time" label="上门时间" required>
				<uni-datetime-picker v-model="formData.date_time" />
			</uni-forms-item>
			<uni-forms-item name="number" label="物品件数" required>
				<uni-easyinput type="text" v-model="formData.number"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="title" label="物品名" required>
				<uni-easyinput type="text" v-model="formData.title"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="content" label="物品状况描述" required>
				<textarea @input="binddata('content', $event.detail.value)" class="uni-textarea-border"
					v-model="formData.content" trim="right"></textarea>
			</uni-forms-item>
			<uni-forms-item name="imgs" label="相关图片">
				<uni-file-picker file-mediatype="image" :limit="6" return-type="array"
					v-model="formData.imgs"></uni-file-picker>
			</uni-forms-item>
			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">预约上门</button>
			</view>
		</uni-forms>
	</view>
</template>

<script>
	import {
		validator
	} from '@/pages/subscribe/subscribe.js';

	const db = uniCloud.database();
	const dbCollectionName = 'uni-id-base-order';

	function getValidator(fields) {
		let result = {}
		for (let key in validator) {
			if (fields.indexOf(key) > -1) {
				result[key] = validator[key]
			}
		}
		return result
	}

	export default {
		data() {
			let formData = {
				"content": "",
				"imgs": [],
				"date_time": '',
				"number": 1,
				"title": '',
				"address_id": this.$store.state.addressId,
				"status": 0,
				"goods_id": ""
			}
			return {
				formData,
				formOptions: {},
				rules: {
					...getValidator(Object.keys(formData))
				},
				address_id: '',
				userInfo: [{
					'name': ' ',
					'addresss': ' '
				}],
			}
		},

		onShow() {
			this.getAddress()
		},
		onLoad(e) {
			this.getAddress()
			if (e.id) {
				const id = e.id
				this.formDataId = id
				this.getDetail(id)
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 触发表单提交
			 */
			submit() {
				if (this.$store.state.addressId == null || this.$store.state.addressId == '') {
					uni.showModal({
						content: '请选择地址',
						showCancel: false
					});
					return
				}
				uni.showLoading({
					mask: true
				})
				this.$refs.form.validate().then((res) => {
					this.submitForm(res)
				}).catch(() => {
					uni.hideLoading()
				})
			},
			submitForm(value) {
				this.formData.address_id = this.$store.state.addressId
				// 使用 clientDB 提交数据
				db.collection(dbCollectionName).add(this.formData).then((res) => {
					uni.showToast({
						icon: 'none',
						title: '预约成功！'
					})
					// this.getOpenerEventChannel().emit('refreshData')
					// setTimeout(() => uni.navigateBack(), 500)
					this.formData = {
						"content": "",
						"imgs": [],
						"date_time": '',
						"number": 1,
						"title": '',
						"address_id": this.$store.state.addressId,
						"status": 0,
						"goods_id": ""
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},

			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			getDetail(id) {
				uni.showLoading({
					mask: true
				})
				db.collection(dbCollectionName).doc(id).field("content,imgs,contact,mobile").get().then((res) => {
					const data = res.result.data[0]
					if (data) {
						this.formData = data
					}
				}).catch((err) => {
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			async getAddress() {
				let res = await db.collection('uni-id-address').where({
					'_id': this.$store.state.addressId
				}).get()
				this.userInfo = res.result.data
			},
			addAddress() {
				uni.navigateTo({
					url: '/pages/uni-id-address/list'
				})
			},
		}
	}
</script>

<style>
	.uni-container {
		padding: 15px;
	}

	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
		background-color: white;
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;

	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
		padding: 12px 20px;
		font-size: 14px;
		border-radius: 4px;
		line-height: 1;
		margin: 0;
	}

	/* 选择地址 */
	.confirm-address-image {
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.choose-address {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address-font {
		font-size: 24rpx;
		color: #8a8a8a;
		height: 50%;
	}

	.address-font-box {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.outer-box {
		background-color: #ffffff;
		width: 710rpx;
		margin: 0 auto 26rpx;
		border-radius: 18rpx;
		overflow: hidden;
	}
</style>